import styled from 'styled-components';

export const Input = styled.input.attrs(({ theme }) => theme)`
    border:none;
    outline:none;
    border:1px solid #BFBFBF;
    padding:6px 10px;
    border-radius:4px;
    box-sizing:border-box;
    transition:all .3s ease ;
    width:100%;
    &:focus{
        border:1px solid #2FA4FF;
    }
`

export const Button = styled.button.attrs(({ theme }) => theme)`
    outline:none ;
    border:none;
    padding:8px 18px;
    background-color:${props => props.activeBackgroundColor};
    border-radius:6px;
    color:${props => props.activeTextColorWitchActiveBackgroundColor};
    cursor: pointer;
    &:hover{
        background-color:#2FA4FF;
    }
`